<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    }
});

const emits = defineEmits(['update:visible']);

const closeModal = () => {
    emits('update:visible', false);
};
</script>
<template>
    <view v-if="visible" class="modal-overlay" @click="closeModal">
        <view class="modal-content" @click.stop>
            <view class="boxs">
                <button class="back">加入黑名单</button>
                <button class="ju-box">举报</button>
                <view class="qux-box" @click="closeModal">
                    <text class="quxiao">取消</text>
                    <image src="/static/images/编组.png" mode="scaleToFill" class="img" />
                </view>
            </view>
        </view>
    </view>
</template>
<style scoped lang="scss">
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    width: 100%;
    max-width: 1000rpx;
    flex-direction: column;

    .boxs {
        display: flex;
        flex-direction: column;
        height: 330rpx;
        width: 750rpx;
        background: #eceaea;

        .back {
            width: 750rpx;
            height: 90rpx;
            text-align: left;
        }

        .ju-box {
            margin-top: 10rpx;
            width: 750rpx;
            height: 90rpx;
            text-align: left;
        }

        .qux-box {
            display: flex;
            margin-top: 38rpx;
            background: #ffffff;
            height: 110rpx;
            width: 750rpx;
            flex-direction: column;

            .quxiao {
                margin-top: 20rpx;
                height: 20rpx;
                width: 750rpx;
                font-size: 32rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #000000;
                line-height: 38rpx;
            }

            .img {
                display: flex;
                height: 90rpx;
                width: 750rpx;
            }
        }
    }
}
</style>
